import React, { useState, useEffect } from 'react'
import { Form, Row, Col, Button, Input, message, TreeSelect, DatePicker } from 'antd'
import style from './Index.module.less'
import { awaitWrap } from '@src/assets/js/tool'
import { getTreeData } from './ajax'
import moment from 'moment'

// 初始化案由树数据
async function initTreeData (setTreeData) {
  const [e, d] = await awaitWrap(getTreeData())
  if (e) {
    return message.warning(e.message)
  }
  setTreeData(d)
}

const { Item } = Form
const layout = {
  labelCol: { flex: '100px' }
}

function getCondition (d, onChange) {
  const condition = []
  if (d.caseno_desc) {
    condition.push({ k: 'caseno_desc', o: 'like', v: `%${d.caseno_desc}%` })
  }
  if (d.applicant) {
    condition.push({ k: 'applicant', o: 'like', v: `%${d.applicant}%` })
  }
  if (d.respondent) {
    condition.push({ k: 'respondent', o: 'like', v: `%${d.respondent}%` })
  }
  if (d.cause_action) {
    condition.push({ k: 'cause_action', o: 'like', v: `%${d.cause_action}%` })
  }
  if (d.begin) {
    const t = Math.floor((moment(`${d.begin.format('YYYY-MM-DD')} 00:00:00`)).valueOf() / 1000)
    condition.push({ k: 'closure_datetime', o: '>=', v: t })
  }
  if (d.end) {
    const t = Math.floor((moment(`${d.end.format('YYYY-MM-DD')} 23:59:59`)).valueOf() / 1000)
    condition.push({ k: 'closure_datetime', o: '<=', v: t })
  }
  onChange(condition)
}

function Main ({ onChange }) {
  const [formRef] = Form.useForm()
  const [treeData, setTreeData] = useState([])
  useEffect(() => {
    initTreeData(setTreeData)
  }, [setTreeData])
  return (
    <div className={style['search-container']}>
      <div className={style['search-form']}>
        <Form form={formRef} {...layout} onFinish={d => getCondition(d, onChange)} onReset={d => formRef.submit()}>
          <Row gutter={24}>
            <Col span={8}>
              <Item name='caseno_desc' label='案号'>
                <Input placeholder='请输入' allowClear />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='applicant' label='申请人'>
                <Input placeholder='请输入' allowClear />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='respondent' label='被申请人'>
                <Input placeholder='请输入' allowClear />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='cause_action' label='案由'>
                <TreeSelect
                  style={{ width: '100%' }}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  treeData={treeData}
                  placeholder='请选择案由'
                  maxTagTextLength={10}
                  multiple
                  showSearch
                />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='begin' label='和解开始时间'>
                <DatePicker placeholder='请选择' allowClear className={style.full} />
              </Item>
            </Col>
            <Col span={8}>
              <Item name='end' label='和解结束时间'>
                <DatePicker placeholder='请选择' allowClear className={style.full} />
              </Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <Item>
                <div className={style['search-btns']}>
                  <Button type='primary' ghost htmlType='submit'>搜索</Button>
                  <Button htmlType='reset' onClick={() => formRef.resetFields()}>重置</Button>
                </div>
              </Item>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  )
}

export default Main
